{% extends "site_base.html" %}
{% block require_javascript %}
require(['unit_choose']);
{% endblock require_javascript %}

{% load i18n %}

{% block head_title %}{% trans "Choose Unit" %}{% endblock %}

{% block body %}

{% if not split_sites %}

  <div class="row">
    <div class="col-md-12">
      <div class="box">
        <div class="box-header">
          <i class="fa fa-cube" aria-hidden="true"></i>
          <h3 class="box-title">{% trans "Choose a Unit to Perform QC On" %}</h3>
          <p>{% trans "Click a button to perform QC for one of the units below." %}</p>
        </div>
        <div class="box-body pad">
          {% for type, units in unit_types %}

            <div class="row margin">
              <div class="col-md-12">

                <h4 class="header-spacer">
                  {{ type.0 }}
                  {% blocktrans with unit_type=type.0 asvar title_hidden %}Click to show {{ unit_type }} units{% endblocktrans %}
                  {% blocktrans with unit_type=type.0 asvar title_shown %}Click to hide {{ unit_type }} units{% endblocktrans %}
                  <a role="button" data-toggle="collapse" data-target="#collapse-{{ site.0 }}-{{ forloop.counter }}"
                    title="{% if type.1 %}{{ title_hidden }}{% else %}{{ title_shown }}{% endif %}"
                    data-title-shown="{{ title_shown }}"
                    data-title-hidden="{{ title_hidden }}"
                  >
                    <i class="fa fa-fw {% if type.1 %}fa-caret-right{% else %}fa-caret-down{% endif %}"></i>
                  </a>
                </h4>
                <div id="collapse-{{ site.0 }}-{{ forloop.counter }}"
                    {% if type.1 %}
                      class="collapse"
                    {% else %}
                      class="collapse in"
                      title="{% blocktrans with unit_type=type.o %}Click to hid {{ unit_type }} units{% endblocktrans %}"
                    {% endif %}
                  >
                  {% for unit in units %}
                    {% include "units/unittype_list_unit_button.html" with unit=unit %}
                  {% endfor %}
                </div>
              </div>
            </div>

          {% endfor %}

        </div>
        <div class="box-footer"></div>
      </div>
    </div>
  </div>

{% else %}

  <div class="row">
    <div class="col-md-12">
      <h4><i class="fa fa-cube" aria-hidden="true"></i>{% trans "Choose a Unit to Perform QC On" %}</h4>
      <p>{% trans "Click a button to perform QC for one of the units below." %}</p>
    </div>
  </div>
  <div class="row equal-cols">
    {% for site, types in unit_types.items %}
      <div class="col-md-{{ split_by }} col-equal" style="position: relative">
        <div class="box" style="">
          <div class="box-header">
            <h3 class="box-title">
              <a href="{% url "qa_by_site" site=site.0 %}" title="{% trans "Click to view all QC at Site: " %}{{ site.1 }}">
                {% if site.1 == 'zzzNonezzz' %}{% trans "Other" %}{% else %}{{ site.1 }}{% endif %}
                <i class="fa fa-cubes"></i>
              </a>
            </h3>
          </div>
          <div class="box-body pad">

            {% for type, units in types %}
              <div class="row margin">
                <div class="col-sm-12">

                  <h4 class="header-spacer">
                    {{ type.0 }}
                    {% blocktrans with unit_type=type.0 asvar title_hidden %}Click to show {{ unit_type }} units{% endblocktrans %}
                    {% blocktrans with unit_type=type.0 asvar title_shown %}Click to hide {{ unit_type }} units{% endblocktrans %}
                    <a role="button" data-toggle="collapse" data-target="#collapse-{{ site.0 }}-{{ forloop.counter }}"
                      title="{% if type.1 %}{{ title_hidden }}{% else %}{{ title_shown }}{% endif %}"
                      data-title-shown="{{ title_shown }}"
                      data-title-hidden="{{ title_hidden }}"
                    >
                      <i class="fa fa-fw {% if type.1 %}fa-caret-right{% else %}fa-caret-down{% endif %}"></i>
                    </a>
                  </h4>
                  <div id="collapse-{{ site.0 }}-{{ forloop.counter }}" class="collapse {% if not type.1 %}in{% endif %}">
                    {% for unit in units %}
                      {% include "units/unittype_list_unit_button.html" with unit=unit %}
                    {% endfor %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
            <div class="box-footer"></div>
        </div>
      </div>

    {% endfor %}
  </div>

{% endif %}
{% endblock %}
